<template>

  <div class="detail-wrap-box">
    <div class="wrap-box">
      <div class="detail-wrap-herad">
        <!-- 导航部分 -->
        <div class="topnav">
          <router-link to="" class="des">目的地</router-link>
          <span v-if="show">&nbsp;{{detailData[0].address}}</span>
        </div>
        <!-- 导航中间文字部分 -->
        <div class="navtext clearfix">
          <h1 v-if="show">{{detailData[0].lable}}</h1> 
          <div class="line"></div>
          <span>
              <div class="img"></div>
              最佳季节:
              <strong v-if="show">{{detailData[0].month}}</strong>
          </span>
          <p>
            <span class="sp1">32%</span>
            <span class="sp2">初次访问巴厘岛的蜂蜂会选择这条线路</span>
          </p>
          <!-- 下划线 -->
          <div class="btm-line"></div>
        </div>
        <!-- 导航底部 -->  
        <!-- background-color="#e6e6e6" -->
        <el-menu class="el-menu" :default-active="activeIndex" 
          mode="horizontal"
          text-color="#333"
          active-text-color="#ff7000"
        >
          <el-menu-item index="1"><a href="#">行程概况</a></el-menu-item>
          <el-menu-item index="2"><a href="#">行程详情</a></el-menu-item>
        </el-menu>
      </div>
    </div>


    <!-- 地图部分 -->
    <!-- <a name="generalize"></a> -->
    <div class="map-wrap">
      <div class="map-wrap-left" v-if="show">
        <p>介绍</p>
        {{detailData[0].title}}
        <div v-if="show"><img :src="detailData[0].image" alt=""></div>
      </div>
      <div class="map-wrap-google">
        <!-- 地图插件 -->
        <aMapSmall></aMapSmall>
      </div>
    </div>
    </div> 
</template>

<script>
// 地图小组件
import aMapSmall from "../../hotel/across.vue";

export default {
  // props:['detailData'],
  name: "WorkspaceJsonDetail",

  data() {
    return {
      activeIndex:"",
      detailData:[],
      show:false
    };
  },
  components: {
    aMapSmall,
  },
   async created() {
    let id =  this.$route.query.id
     window.scrollTo(0,0);
    let datas = await this.$http.post('/destSearchDetail',{id:id})
    this.detailData = datas.data.data
    this.show = true
    console.log(datas.data.data);
  },

  mounted() {
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.detail-wrap-box {
  width: 100%;
  min-height:600px;
  border:2px solid rgb(224, 224, 224) ;
  
  .wrap-box{
    width: 100%;
    margin :0 auto;
    height: 230px;
  .detail-wrap-herad {
    margin: 0 auto;
    width: 1200px;
    height: 230px;
    
    //  导航部分 
     .topnav{
       height: 50px;
       line-height: 50px;
       margin:0 auto;
        .des{
          color: #666;
          font-size: 12px;
          text-decoration: none;
        }
        .des:hover{
          text-decoration: underline;
        }
        span{
          color: #ff7000;
          font-size: 12px;
        }
        span::before{
          content: ">";
          color: #666;
          }
        }
    // 导航中间文字部分
     .navtext{
       height: 91px;
       h1{
        color: #333;
        font-size: 30px;
        font-weight:normal;
        float:left;
        margin-right: 36px;
       }
      .line{
        width: 0px;
        height: 24px;
        border-right: 1px solid #666;
        float:left;
        margin-top: 10px;
        margin-right: 36px;
      }
       span{
         display: inline-block;
         color:#666;
         font-size:12px;
         margin-top:7px;
         width: 200px;
         height: 32px;
         overflow: hidden;
         line-height: 32px;
         .img{
             width: 32px;
             height: 32px;
             background-image: url(https://css.mafengwo.net/images/mdd/place/line-details-sprites7.png);
             background-position-x:112px;
             float: left;
             margin-right:7px;
            }
        }
      p{
        color: #999;
        .sp1{
          background-color: #ff7000;
          width: 40px;
          height: 21px;
          color: #fff;
          line-height: 21px;
          border: none;
          padding-left:3px; 
        };
        .sp2{
          height: 21px;
          line-height: 21px;
          font-size: 14px;
          width: 500px;
        }
      }
      .btm-line{
        border-bottom: 1px solid #e6e6e6;
        width: 1200px;
        height: 0;
        margin-top: 15px;
      }
    }
    // 导航底部
     .el-menu--horizontal>.el-menu-item {
        height: 87px;
        line-height: 87px;
      }
      .el-menu{
       a{
          text-decoration: none;
        }
      }
    }
   }

   // 地图部分
   .map-wrap {
    padding-top:40px;
    > h2 {
      text-align: center;
    }
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 1200px;
    height: 340px;
    .map-wrap-left {
      padding: 10px 20px;
      box-sizing: border-box;
      border: 1px solid rgb(219, 219, 219);
      border-bottom:0px ;
      width: 586px;
      height: 100%;
      >p{
        font-weight:600;
        font-size:25px;
      }
      >div{
        img{
        width: 370px;
      }
      }
    }
    .map-wrap-google {
      width: 600px;
      height: 340px;
      margin: 0 auto;
      /* background: rgb(134, 213, 236); */
    }
  }    
}
</style>